<template>
	<view class="xilu dark-theme">
		<!-- 封面图（保持原高度但增加底部间距） -->
		<image class="detail_cover" :src="info.xilufitness_urls.wrap_image" mode="widthFix"></image>
		<view v-if="pay_type === 4" class="mt20 plr30 fs28 col9">
		    <view class="flex-box">
		        <text>余额支付：</text>
		        <text class="col3">{{ mixedPayInfo.balance || 0 }}元</text>
		    </view>
		    <view class="flex-box mt10" v-if="mixedPayInfo.wechat > 0">
		        <text>微信支付：</text>
		        <text class="col3">{{ mixedPayInfo.wechat || 0 }}元</text>
		    </view>
		</view>
		<view class="enhanced-card">
			<view :class="pay_type == 1 ? 'xilu_pay_item flex-box ac plr30' : 'xilu_pay_item flex-box plr30'"
				@tap="choosePayType(1)">
				<image src="@/static/images/balance.png" mode="aspectFill" class="ico40"></image>
				<view class="flex-grow-1 plr20 fs32 col3">余额支付</view>
				<view class="fs30 col2">余额：{{userInfo.account || 0}}元</view>
			</view>
			<view :class="pay_type == 2 ? 'xilu_pay_item flex-box ac plr30' : 'xilu_pay_item flex-box plr30'"
				@tap="choosePayType(2)">
				<image src="@/static/images/xilu_icon14.png" mode="aspectFill" class="ico40"></image>
				<view class="flex-grow-1 plr20 fs32 col3">微信支付</view>
			</view>
			<view :class="pay_type == 4 ? 'xilu_pay_item flex-box ac plr30' : 'xilu_pay_item flex-box plr30'"
				@tap="choosePayType(4)">
				<image src="@/static/images/mixed.png" mode="aspectFill" class="ico40"></image>
				<view class="flex-grow-1 plr20 fs32 col3">混合支付</view>
			</view>
		</view>
		<!-- 内容容器（增加内边距和元素间距） -->
		<view class="detail_container enhanced-card">
			<!-- 标题区（增加下边距） -->
			<view class="detail_header">
				<text class="pkg_name">{{info.wrap_name}} 次数:{{info.wrap_count}}</text>
				<text class="pkg_price">¥{{formatPrice(info.wrap_price)}}</text>
			</view>

			<!-- 分隔线（颜色微调） -->
			<view class="detail_divider"></view>

			<!-- 内容区（增加行高和间距） -->
			<view class="detail_item expanded-item">
				<view class="label">包含内容</view>
				<view class="value">{{info.info || '暂无介绍'}}</view>
			</view>

			<view class="detail_item expanded-item">
				<view class="label">简介说明</view>
				<rich-text class="value rich-text-content" :nodes="info.content"></rich-text>
			</view>
		</view>

		<!-- 底部按钮（样式增强） -->
		<view class="detail_footer">
			<button class="buy_btn enhanced-btn" @click.stop="createOrder()">立即购买</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info: {
					xilufitness_urls: {
						wrap_image: ''
					}, // 确保嵌套对象存在
					content: ''
				},
				shop_id: '',
				userInfo: '',
				pay_type: 1,
				mixedPayInfo: {
				    balance: 0, // 余额支付金额
				    wechat: 0 // 微信支付金额
				}
			}
		},
		onLoad(options) {
			this.shop_id = options.id; // 保存商品ID
			this.loadDetail(options.id);
			this.getUserDetail()
		},
		methods: {
			formatPrice(price) {
				if (price === undefined || price === null) return '0.00'; // 处理未定义情况
				const num = parseFloat(price);
				return isNaN(num) ? '0.00' : num.toFixed(2); // 处理非数字
			},
			choosePayType(pay_type) {
			    this.pay_type = pay_type;
			    const totalPrice = parseFloat(this.info.wrap_price); // 总金额（你上面的代码是 wrap_price 不是 price）
			    const userBalance = parseFloat(this.userInfo.account); // 用户余额
			
			    if (pay_type === 4) {
			        // 混合支付逻辑：优先余额，最后微信
			        let remaining = totalPrice;
			
			        const balancePay = Math.min(remaining, userBalance); // 余额支付部分
			        remaining -= balancePay;
			
			        const wechatPay = Number(remaining.toFixed(2)); // 微信支付剩余部分
			
			        this.mixedPayInfo = {
			            balance: balancePay,
			            wechat: wechatPay
			        };
			
			        // 提示信息（可选）
			        this.ifPayState = `余额 ${balancePay}元 + 微信 ${wechatPay}元`;
			    }
			},
			getUserDetail() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/user/index',
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						_this.userInfo = res.data.info;
					}
				}).catch(error => {
					console.log('userError', error);
				})
			},
			// 提取详情加载为独立方法
			loadDetail(id) {
				this.$http({
					url: "/addons/xilufitness/wrap/detail",
					data: {
						id
					},
					method: 'get'
				}).then(res => {
					this.info = {
						...res.data.info,
						// 确保content有默认值
						content: res.data.info.content || '<p>暂无详情</p>'
					};
				}).catch(err => {
					console.error('加载失败', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				});
			},
			createOrder() {
				let _this = this;
				let token = this.$api.getCache('token');
				console.log(token);
				if (!token) {
					this.auth_status = true;
					uni.showToast({
						title: '未登录'
					})
				} else {
					this.$http({
						url: '/addons/xilufitness/wrap_order/createOrder',
						data: {
							id: this.shop_id,
							pay_type: this.pay_type
						},
						method: 'post'
					}).then(res => {
						if (res.code == 1) {
							_this.toPay(res.data);
						} else {
							_this.$api.modal('温馨提示', (res.msg || '下单失败'), function(ret) {

							}, false)
						}
					}).catch(error => {
						console.log('orderError', error);
					});
				}
			},
			//去支付
			toPay(data) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/wrap_pay/index',
					data: data,
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						if (data.pay_type == 2) {

							//发起微信支付
							_this.wechatPay(res.data, data.order_type);
						} else if (data.pay_type == 4) {

							if (res.data) {
								_this.wechatPay(res.data, data.order_type);
							} else {
								console.log(1);
								_this.$api.navigate('../package_success/package_success');
							}
						} else {
							//到支付成功界面
							_this.$api.navigate('../package_success/package_success');
						}
					} else {
						_this.$api.modal('温馨提示', res.msg || '支付失败', function() {}, false);
					}
				}).catch(error => {
					console.log('payError', error);
				})
			},
			//发起微信支付
			wechatPay(data, order_type) {
				let _this = this;
				this.$api.toPay(data, order_type, function(res) {
					console.log('支付成功');
					_this.$api.navigate('../package_success/package_success');

				}, function(error) {
					console.log('支付失败');

					_this.$api.modal('温馨提示', '支付失败', function() {}, false);
					console.log('payError', error);
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 0;
	}

	.mixed-pay-detail {
		background: #333;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.ac {
		border: 2rpx solid #FFCF00;
	}

	.xilu {
		&_swiper_info {
			width: 100%;
			height: 750rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		&_mask {
			width: 100%;
			height: 380rpx;
			position: absolute;
			bottom: 0;
			z-index: 3;
			left: 0;
		}

		&_swiper_dot {
			display: inline-block;
			height: 39rpx;
			line-height: 39rpx;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 20rpx;
			position: absolute;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			right: 25rpx;
			bottom: 410rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			z-index: 4;
		}

		&_introduce_box {
			width: 700rpx;
			// margin-top: -380rpx;
			background: #292B2C;
			border-radius: 20rpx;
			padding: 40rpx 30rpx 30rpx;
		}

		&_box {
			background: #292B2C;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 30rpx;
		}

		&_choose_link {
			min-width: 118rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: #404243;
			border-radius: 10rpx;
			display: inline-block;
			vertical-align: top;
			padding: 0 15rpx;
			margin-left: 25rpx;
			margin-bottom: 20rpx;

			&.ac {
				color: #0E0E0F;
				background: #FFCF00;
			}
		}

		// &_choose_link+&_choose_link {
		// 	margin-left: 25rpx;
		// }

		&_pay_item+&_pay_item {
			margin-top: 30rpx;
		}

		&_pay_item {
			width: 640rpx;
			height: 110rpx;
			background: #E8EEFE;
			border-radius: 15rpx;

			&.ac {
				border: 2rpx solid #FFCF00;
			}
		}

		&_foot_nav {
			width: 700rpx;
			height: 125rpx;
			background: #2C2D2E;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.96);
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			&_btn {
				width: 245rpx;
				height: 125rpx;
				line-height: 125rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #0E0E0F;
				background: #FFCF00;
				border-radius: 0rpx 20rpx 20rpx 0rpx;
			}
		}
	}

	.detail_header {
		display: flex;
		justify-content: space-between;
	}

	/* 保持原黑色主题 */
	.dark-theme {
		background-color: #E8EEFE;
		min-height: 100vh;
		padding-bottom: 140rpx;
		/* 增加底部间距 */
	}

	/* 封面图调整 */
	.detail_cover {
		width: 100%;
		height: 420rpx;
		margin-bottom: 10rpx;
		/* 增加与卡片的间距 */
	}

	/* 卡片样式增强 */
	.enhanced-card {
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 40rpx;
		/* 内边距增大 */
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		/* 添加阴影 */
	}

	/* 标题样式微调 */
	.pkg_name {
		font-size: 38rpx;
		/* 略微增大 */
		font-weight: bold;
		color: #333;
		letter-spacing: 1rpx;
		/* 增加字距 */
	}

	.pkg_price {
		font-size: 44rpx;
		/* 略微增大 */
		color: #FF5A5F;
		font-weight: bold;
	}

	/* 分隔线样式 */
	.detail_divider {
		height: 2rpx;
		/* 加粗 */
		background: #3A3A3A;
		margin: 35rpx 0;
		/* 增加间距 */
	}

	/* 内容项扩展 */
	.expanded-item {
		margin-bottom: 35rpx;
		/* 增加间距 */
		padding: 10rpx 0;
		/* 增加内边距 */
	}

	.label {
		color: #999999;
		font-size: 30rpx;
		width: 140rpx;
		/* 略微加宽 */
		display: inline-block;
		vertical-align: top;
	}

	.value {
		font-size: 30rpx;
		color: #333;
		flex: 1;
		line-height: 1.8;
		/* 增加行高 */
	}

	/* 富文本内容调整 */
	.rich-text-content {
		line-height: 1.8;
	}

	.rich-text-content p {
		margin-bottom: 20rpx !important;
	}

	/* 底部按钮增强 */
	.detail_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx;
		/* 增加内边距 */
		background: #fff;
		border-top: 1rpx solid #eee;
	}

	.enhanced-btn {
		background: #FF5A5F;
		color: white;
		border-radius: 50rpx;
		height: 90rpx;
		/* 增高 */
		line-height: 90rpx;
		font-size: 34rpx;
		/* 增大字号 */
		border: none;
		box-shadow: 0 5rpx 15rpx rgba(255, 90, 95, 0.4);
		/* 添加阴影 */
	}
</style>